<script setup>
import {onMounted, ref} from "vue";
import GetMap from "src/utils/GetMap.js";
import ImportDialog from "components/Import/ImportDialog.vue";

let map;
let showDialog = ref(false);
let marker=ref(null);
let model = ref(null)
onMounted(() => {

  map = GetMap({
    drawMarker: true,
    drawCircle: false,
    drawCircleMarker: false,
    removeMode: false,
    cutPolygon: false,
    },
  );
  L.easyPrint({
    title: '导出地图',
    position: 'topleft',
    exportOnly:true,
    sizeModes: ['CurrentSize','A4Portrait', 'A4Landscape']
  }).addTo(map);
  map.on('pm:create', (e) => {
    let layer = e.layer;
    let type = e.shape;
    if (type === 'Marker') {
      layer.on('click', (e) => {
        marker.value = layer;
        showDialog.value = true;
      })
    }
  });
})
const importData = () => {
  alert('导入数据')
}
const exportData = () => {
  alert('导出数据')
}


</script>

<template>

  <div id="map">
    <div class="q-pa-md q-gutter-sm query">
      <q-file
        color="yellow"
        rounded
        outlined
        v-model="model"
        label="上传shape文件"
        bg-color="blue"
        accept=".shp,.shx,.dbf"
      >
        <template v-slot:prepend>
          <q-icon name="cloud_upload" />
        </template>
      </q-file>
      <q-space />
      <q-file
        color="yellow"
        rounded
        outlined
        v-model="model"
        label="上传GeoJson文件"
        bg-color="blue"
        accept=".geojson;.json"
      >
        <template v-slot:prepend>
          <q-icon name="cloud_upload" />
        </template>
      </q-file>
    </div>
  </div>
  <ImportDialog v-model:showDialog="showDialog" v-model:marker="marker" />



</template>

<style scoped>
.query {
  max-width: 600px;
  width: 20%;
  position: absolute;
  top: 10;
  right: 0;
  z-index: 1004;
}
</style>
